<template>
  <div class="phone_container">
    <div class="phone_container_box">
      <div class="box">
        <div class="box_header">
          <el-image class="avatar" :src="officialAccounts.head_img" fit="cover">
            <template #error>
              <img class="avatar"
                src=""
                alt="" />
            </template>
          </el-image>

          <div>{{ officialAccounts.nick_name }}</div>
        </div>
        <div class="list">
          <template v-for="(item, index) in form.content" :key="`zw${index}`">
            <template v-if="index === 0">
              <!-- 图文 -->
              <div v-if="item.article_type == 'mpnews'" class="pic_list_item">
                <div class="pic_list_item_left" @click="onhandoff(index)">
                  <el-image :class="index == active ? 'pic_list_item_left active' : 'pic_list_item_left'"
                    :src="item.cover" fit="cover" :draggable="false">
                    <template #error>
                      <div class="pic_list_item_left"></div>
                    </template>
                  </el-image>
                  <div class="pic_list_item_left_content">{{ item.article_title }}</div>
                </div>
                <div class="pic_list_item_right">
                  <div class="pic_list_item_right_btn">
                    <PhoneBtn :isDelete="!id" v-show="index === active && form.content.length > 1" :shwoType="onShwoType(index)" />
                  </div>
                </div>
              </div>
              <!-- 图片 -->
              <div v-if="item.article_type == 'image'" class="pic_list_item">
                <div class="pic_list_item_left" @click="onhandoff(index)">
                  <el-image :class="index == active ? 'pic_list_item_left active' : 'pic_list_item_left'"
                    :src="item?.link[0]" fit="cover" :draggable="false">
                    <template #error>
                      <div class="pic_list_item_left"></div>
                    </template>
                  </el-image>
                  <div class="pic_list_item_left_content">{{ item.article_title }}</div>
                </div>
                <div class="pic_list_item_right">
                  <div class="pic_list_item_right_btn">
                    <PhoneBtn :isDelete="!id" v-show="index === active && form.content.length > 1" :shwoType="onShwoType(index)" />
                  </div>
                </div>
              </div>
              <!-- 视频 -->
              <div v-if="item.article_type == 'video'" class="video_list_item">
                <div class="video_list_item_left">
                  <div class="video_list_item_left_content">{{ item.article_title }} </div>
                  <div class="card_video_player_wrp">
                    <div class="card_video_player"> </div>
                    <div class="card_video_length"> 0.03 </div>
                  </div>
                </div>
                <div class="video_list_item_right">
                  <div class="video_list_item_right_btn">
                    <PhoneBtn :isDelete="!id" v-show="index === active" :shwoType="onShwoType(index)" />
                  </div>
                </div>
              </div>
              <!-- 音频 -->
              <div v-if="item.article_type == 'voice'"
                :class="index == active ? 'audio_list_item active' : 'audio_list_item'">
                <div class="audio_list_item_left">
                  <div class="audio_list_item_left_content">
                    <div class="audio_list_item_left_content_left"> {{ state.audioLength || '' }} </div>
                    <div class="audio_list_item_left_content_right"> </div>
                  </div>
                </div>
                <div class="audio_list_item_right">
                  <div class="audio_list_item_right_btn">
                    <!-- <PhoneBtn :isDelete="!id" v-show="index === active" /> -->
                  </div>
                </div>
              </div>
              <!-- 文字 -->
              <div v-if="item.article_type == 'text'" class="pic_list_item">
                <div class="pic_list_item_left" @click="onhandoff(index)">
                  <el-image :class="index == active ? 'pic_list_item_left active' : 'pic_list_item_left'"
                    style="background: #fff" :src="item.cover" fit="cover" :draggable="false">
                    <template #error>
                      <div></div>
                    </template>
                  </el-image>
                  <div class="pic_list_item_left_text">
                    <div class="content_text">
                      {{ item.text }}
                    </div>
                  </div>
                </div>
                <div class="pic_list_item_right">
                  <div class="pic_list_item_right_btn">
                    <PhoneBtn :isDelete="!id" v-show="index === active && form.content.length > 1" :shwoType="onShwoType(index)" />
                  </div>
                </div>
              </div>
            </template>
            <!-- 第二条 -->
            <div v-else class="two_list_item">
              <div :class="index === active ? 'two_list_item_left active' : 'two_list_item_left'"
                @click="onhandoff(index)">
                <div class="two_list_item_left_content">{{ item.article_title }}</div>
                <el-image class="two_list_item_left_pic" :src="item.cover">
                  <template #error>
                    <div class="two_list_item_left_pic"></div>
                  </template>
                </el-image>
              </div>
              <div class="two_list_item_right">
                <div class="audio_list_item_right_btn">
                  <PhoneBtn :isDelete="!id" v-show="index === active" :shwoType="onShwoType(index)" />
                </div>
              </div>
            </div>
          </template>
          <!-- 按钮 -->
          <div v-if="form.content.length < 8 &&  !id && !['2', '3', '4', '5'].includes(route.query.type)" class="add_box">
            <Dropdown @submit="onAdd" :shwoBtn="['2', '3', '4', '5']">
              <div class="add_box_btn"> <img src="/src/assets/image/content/add-icon.png" alt="" /> <span>新建消息</span>
              </div>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ZWGraphic ref="ZWGraphicRef" @submit="getGraphic" />
</template>

<script setup lang="ts">
import PhoneBtn from './PhoneBtn.vue'
import Dropdown from '../../components/Dropdown.vue'
import ZWGraphic from '@/components/ZWGraphic.vue'
import { getOfficalArticleDetail } from '@/api/content/channelFootage/officialaccountgraphics'
import bus from '@/utils/bus'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const pageType = route.query.type
const id = route.query.id
const active = ref(0)
const form = ref({
  content: []
})
const state = reactive({
  audio: {},
  audioLength: ''
})
const onhandoff = (index: any) => {
  active.value = index
  bus.emit('handoff', index)
}
const onAdd = (type: string) => {
  switch (type) {
    case '0': // 写新图文
      bus.emit('add', type)
      active.value = form.value.content.length - 1
      break
    case '1': // 选择已有图文
      ZWGraphicRef.value.appDialog.articleType = 1
      ZWGraphicRef.value.appDialog.multiple = false
      ZWGraphicRef.value.appDialog.visible = true
      break
  }
}
bus.on('form', (data: any) => {
  form.value = data
  console.log(form.value, '981389981')
})
bus.on('audio', (data: any) => {
  console.log('音频',data);
  if(data){
    state.audio = data
    const time = Math.floor(data.audioTime)
    const minute = Math.floor(time / 60)
    const second = time % 60
    console.log(minute, second, '分钟秒');
    state.audioLength = `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
  } else {
    state.audio = {}
    state.audioLength = ''
  }

})
bus.on('phoneBtn', (type) => {
  switch (type) {
    case 'top':
      // 上移
      active.value--
      break
    case 'bottom':
      // 下移
      active.value++
      break
    case 'del':
      // 删除
      active.value--
      break
  }
})
const handle = (type: string) => {
  console.log('handle')
  bus.emit('phoneBtn', type)
}
// 按钮显示
const onShwoType = (index: number) => {
  if (index === 0) {
    return 'top'
  } else if (index === form.value.content.length - 1) {
    return 'bottom'
  } else {
    return 'center'
  }
}
// 获取公众号信息
const officialAccounts = reactive({
  created_at: '',
  head_img: '',
  id: '',
  nick_name: '',
  service_type_info: 2,
  verify_type_info: 0
})
bus.on('officialAccounts', (v) => {
  console.log(v, '公众号信息')
  Object.keys(officialAccounts).forEach((key) => {
    officialAccounts[key] = v[key]
  })
})

const ZWGraphicRef = ref<any>(null)
// 选择已有图文确认
const getGraphic = async (v: any) => {
  console.log(v)
  const res = await getOfficalArticleDetail({ id: v[0].id })
  console.log(res, 'res')
  bus.emit('addyiyou', res)
  active.value += res.content.length
  if (active.value > 7) active.value = 7
}
bus.on('toRule', (index: any) => {
  onhandoff(index)
})
onMounted(() => {
  // switch (pageType) {
  //   case '1':
  //     ZWGraphicRef.value.appDialog.articleType = 1
  //     ZWGraphicRef.value.appDialog.multiple = false
  //     ZWGraphicRef.value.appDialog.visible = true
  //     // bus.emit('add', '1')
  //     break
  // }
  console.log(route, 'route.params')

  // getGraphic(route.params.row)
})
// 解绑事件
onUnmounted(() => {
  bus.off('form')
  bus.off('phoneBtn')
  bus.off('officialAccounts')
  bus.off('audio')
  bus.off('toRule')
})
</script>

<style scoped lang="scss">
.active {
  border: 2px solid #ff6b00;
}

.phone_container {
  width: 400px;
  max-height: calc(100vh - 270px);
  padding: 5px 0 0 5px;
  font-size: 14px;
  line-height: 1;
  position: fixed;
  top: 150px;
  bottom: -8px;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;

  .phone_container_box {
    width: 310px;
    box-shadow: 0px 4px 18px 0px #EAEAEA;

    .box_header {
      padding: 10px 15px;
      display: flex;
      align-items: center;

      .avatar {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
      }
    }

    .list {

      // 图文
      .pic_list_item {
        display: flex;
        position: relative;

        .pic_list_item_left {
          width: 310px;
          height: 130px;
          background: #d6d6d6;
          box-sizing: border-box;

          .pic_list_item_left_content {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
            color: #ffffff;
            font-weight: 400;
            z-index: 1;
            line-height: 22px;
          }

          .pic_list_item_left_text {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;

            .content_text {
              align-items: center;
              justify-content: center;
              line-height: 36px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              word-break: break-all;
              font-weight: 400;
            }
          }
        }

        .pic_list_item_right {
          position: relative;

          .pic_list_item_right_btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      // 视频
      .video_list_item {
        display: flex;
        position: relative;

        .video_list_item_left {
          width: 310px;
          height: 170px;
          background-color: #c0c0c0;

          .video_list_item_left_content {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
            color: #ffffff;
            font-weight: 400;
            z-index: 1;
            line-height: 22px;
          }

          .card_video_player_wrp {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-align: center;
            align-items: center;
          }

          .card_video_player {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: rgba(237, 237, 237, 0.9);
            border-radius: 50%;

            &::before {
              content: '';
              display: inline-block;
              width: 28px;
              height: 28px;
              vertical-align: middle;
              background-size: cover;
              background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E %3Cpath fill=%27%23000000%27 opacity=%27.9%27 fill-rule=%27evenodd%27 d=%27M9.524 4.938l10.092 6.21a1 1 0 0 1 0 1.704l-10.092 6.21A1 1 0 0 1 8 18.21V5.79a1 1 0 0 1 1.524-.852z%27/%3E%3C/svg%3E');
            }
          }

          .card_video_length {
            font-size: 12px;
            font-style: normal;
            padding-top: 4px;
            color: #ffffff;
          }
        }

        .video_list_item_right {
          position: relative;

          .video_list_item_right_btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      // 音频
      .audio_list_item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 30px 15px;

        .audio_list_item_left {
          width: 310px;

          .audio_list_item_left_content {
            display: flex;
            align-items: center;

            .audio_list_item_left_content_left {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              line-height: 22px;
              word-break: break-all;
            }

            .audio_list_item_left_content_right {
              margin-left: 10px;
              background: transparent url('') no-repeat 50% 50%;
              width: 42px;
              height: 42px;
              vertical-align: middle;
              display: inline-block;
              background-size: 100% auto;
              cursor: pointer;
              line-height: 300px;
              overflow: hidden;
            }
          }

          .card_audio_player_wrp {
            padding: 36px 15px;
          }
        }

        .audio_list_item_right {
          position: relative;
        }
      }

      // 第二条
      .two_list_item {
        display: flex;
        width: 370px;

        .two_list_item_left {
          min-width: 310px;
          max-width: 310px;
          padding: 12px;
          display: flex;
          box-sizing: border-box;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            right: 12px;
            left: 12px;
            bottom: 0;
            height: 1px;
            width: calc(100% - 24px);
            background: #e5e5e5;
          }

          .two_list_item_left_content {
            flex: 1;
            display: flex !important;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
            font-weight: 400;
            line-height: 22px;
          }

          .two_list_item_left_pic {
            width: 48px;
            height: 48px;
            margin-left: 10px;
            background: #e1e1e1;
          }
        }

        .two_list_item_right {
          position: relative;

          .two_list_item_right_btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      .add_box {
        .add_box_btn {
          width: 310px;
          height: 70px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-weight: 400;
          color: #ff6b00;
          cursor: pointer;

          img {
            width: 20px;
            height: 20px;
            padding-bottom: 10px;
          }
        }
      }
    }
  }
}

.audio_list_item_right_btn {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
